<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../static/plugins/layui/css/formSelects-v4.css">

</head>
<style>
    .ok-body {
        padding: 10px
    }

</style>

<body>
<div class="ok-body">

    <blockquote class="layui-elem-quote layui-text">
        设备信息管理
    </blockquote>

    <form class="layui-form layui-form-pane" action="">

        <div class="layui-form-item">

            <div class="layui-inline">
                <input type="hidden" name="id" id="deviceId" th:value="${id}">
                <label class="layui-form-label">设备名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required" placeholder="必填" autocomplete="off" class="layui-input">
                </div>

            </div>

            <div class="layui-inline">
                <div class="layui-inline">
                    <label class="layui-form-label">设备编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="number" lay-verify="required" placeholder="必填" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">设备描述</label>
                <div class="layui-input-inline">
                    <input type="text" name="description" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">制造厂商</label>
                <div class="layui-input-inline">
                    <input type="text" name="producer" autocomplete="off" class="layui-input">
                </div>
            </div>

        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">设备型号</label>
                <div class="layui-input-inline">
                    <input type="text" name="modelNumber" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">生产线</label>
                <div class="layui-input-inline">
                    <select name="productionLine" lay-verify="required" lay-filter="productionLine" lay-search>
                        <option value="">必选</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: small;">设备生产日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="bornDate" id="bornDate" lay-verify="required" placeholder="必填" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: small;">设备安装日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="installDate" id="installDate" placeholder="必填" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">故障总次数</label>
                <div class="layui-input-inline">
                    <input type="text" name="failCount" value="0" lay-verify="duration" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">故障总时长</label>
                <div class="layui-input-inline">
                    <input type="text" name="failTotalTime" value="0" lay-verify="duration" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">分钟</div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">设备类型</label>
                <div class="layui-input-inline">
                    <select name="modelId" lay-verify="required" lay-filter="model" lay-search>
                        <option value="">必选</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">设备承保人</label>
                <div class="layui-input-inline">
                    <select name="insurerId" lay-verify="required" lay-search>
                        <option value="">必选</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px;" pane>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked="" name="status" lay-skin="switch" value="1" lay-filter="switchTest"
                       lay-text="启用|禁用">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">
    //全局定义一次, 加载formSelects
    layui.config({
        base: '../static/plugins/layui/lay/modules/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use(['form', 'laydate', 'formSelects'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var formSelects = layui.formSelects;
        var tableName = 'device';
        var id = $('#deviceId').val();


        //设备安装日期
        laydate.render({
            elem: '#installDate'
            //  , type: 'month'
            , format: 'yyyy-MM-dd'
        });

        //设备出厂日期
        laydate.render({
            elem: '#bornDate'
            // , type: 'month'
            , format: 'yyyy-MM-dd'
        });

        var oldParts = [];

        if (id) {
            //表示是修改页面
            var param = 'current=1&pageSize=2&searchCol=id&searchValue=' + id;
            JJZ.requestTableData(tableName, param, function (data) {
                var result = data.records[0];

                JJZ.named('name').val(result.name);
                JJZ.named('description').val(result.description);
                JJZ.named('number').val(result.number);
                JJZ.named('producer').val(result.producer);
                JJZ.named('modelNumber').val(result.modelNumber);
                JJZ.named('failTotalTime').val(result.failTotalTime);
                JJZ.named('failCount').val(result.failCount);

                JJZ.named('installDate').val(JJZ.FormatDate(result.installDate, 'yyyy-MM-dd'));
                JJZ.named('bornDate').val(JJZ.FormatDate(result.bornDate, 'yyyy-MM-dd'));


                result.status == 1 ? '' : JJZ.named('status').removeAttr("checked");

                JJZ.initSelect(JJZ.named('modelId'), '/model/dataGrid', function (noError) {
                    if (noError) {
                        JJZ.named('modelId').find('option').each(function (index, elem) {
                            $(elem).val() == result.modelId ? $(elem).attr("selected", "selected") : '';
                        })
                        form.render(); //更新表单
                    }
                });

                JJZ.initSelectShowField(JJZ.named('insurerId'), '/user/dataGrid', 'username', function (noError) {
                    if (noError) {
                        JJZ.named('insurerId').find('option').each(function (index, elem) {
                            $(elem).val() == result.insurerId ? $(elem).attr("selected", "selected") : '';
                        })
                        form.render(); //更新表单
                    }
                });

                JJZ.initSelect(JJZ.named('productionLine'), '/productionLine/dataGrid', function (noError) {
                    if (noError) {
                        JJZ.named('productionLine').find('option').each(function (index, elem) {
                            $(elem).val() == result.productionLine ? $(elem).attr("selected", "selected") : '';
                        });
                        form.render(); //更新表单
                    }
                });

            });

        } else {
            //初始化设备型号下拉框
            JJZ.initSelect(JJZ.named('modelId'), '/model/dataGrid', function (noError) {
                form.render();
            });
            //初始化生产线下拉框
            JJZ.initSelect(JJZ.named('productionLine'), '/productionLine/dataGrid', function (noError) {
                form.render();
            });
            //初始化承保人下拉框
            JJZ.initSelectShowField(JJZ.named('insurerId'), '/user/dataGrid', 'username', function (noError) {
                form.render();
            });
        }

        form.verify({
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            duration: [
                /^[1-9]\d*|0$/
                , '请输入非负整数(正整数+0)!'
            ]
        });

        form.on('submit(submit)', function (data) {
            data.field.status = data.field.status == 1 ? 1 : 0;
            var newParts = formSelects.value('devicePart', 'val');

            if (id) {
                data.field.hasChangeModel = oldParts.join() === newParts.join() ? false : true;
                //编辑
                JJZ.editData(tableName, data.field, function (data) {
                    window.location.href = JJZ.baseUrl + '/' + tableName + '/deviceDataGrid';
                })
            } else {
                //新增
                JJZ.addData(tableName, data.field, function (data) {
                    window.location.href = JJZ.baseUrl + '/' + tableName + '/deviceDataGrid';
                })
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    });
</script>
</body>
</html>